<template>
    <div class="panel-container" v-show="isShow">
        <div class="panel-header">
            {{title}}
            <div class="panel-header-tools">
                <el-tooltip content="刷新" placement="bottom" effect="dark" :open-delay="200" :hide-after="1000">
                    <i class="ion ion-ios-refresh tools-common refresh-icon" @click="refreshPanel"></i>
                </el-tooltip>
                <el-tooltip :content="isFold ? '展开':'折叠'" placement="bottom" effect="dark" :open-delay="200" :hide-after="1000">
                    <i class="ion tools-common mix-icon" :class="{'ion-ios-remove': !isFold, 'ion-ios-add': isFold}" @click="foldPanel"></i>
                </el-tooltip>
                <el-tooltip content="关闭" placement="bottom" effect="dark" :open-delay="200" :hide-after="1000">
                    <i class="ion ion-ios-close tools-common close-icon" @click="closePanel"></i>
                </el-tooltip>
            </div>
        </div>
        <!--vue提供的过渡用法，未使用-->
        <!--<transition name="myTransition">-->
        <el-collapse-transition>
            <div class="panel-body" ref="myBody" :style="{padding: bodyPadding+'px'}" v-loading="isLoading" v-show="!isFold">
                <slot></slot>
            </div>
        </el-collapse-transition>
        <!--</transition>-->
    </div>
</template>

<script>
    import ElCollapseTransition from "element-ui/lib/transitions/collapse-transition";
    export default {
        components: {ElCollapseTransition},
        data() {
            return {
                isShow: true,
                isFold: false,
                isLoading: false
            }
        },
        props: {
            title: {
                type: String,
                required: false,
                default: '自定义'
            },
            bodyPadding: {
                type: Number,
                required: false,
                default: 15
            }
        },
        methods: {
            closePanel() {
                if(this.isShow)
                    this.isShow = false;
            },
            foldPanel() {
                this.isFold = !this.isFold;
            },
            refreshPanel() {
                // 可从外部接收一个更新方法
                if (!this.isFold) {
                    this.isLoading = true;
                    setTimeout(()=>this.isLoading=false, 1000);
                }
            }
        }
    }
</script>

<style scoped lang="scss">
    /*混合，可以对同一css进行分组*/
    @mixin border-radius($radius) {
        -webkit-border-radius: $radius;
        -moz-border-radius: $radius;
        border-radius: $radius;
    }
    @mixin border-radius-top-both($radius) {
        -webkit-border-radius: $radius $radius 0 0;
        -moz-border-radius: $radius $radius 0 0;
        border-radius: $radius $radius 0 0;
    }
    @mixin border-radius-bottom-both($radius) {
        -webkit-border-radius: 0 0 $radius $radius;
        -moz-border-radius: 0 0 $radius $radius;
        border-radius: 0 0 $radius $radius;
    }
    .panel-container {
        /*引入混合*/
        @include border-radius-top-both(4px);
        overflow: hidden;
        /*面板头部*/
        .panel-header {
            padding: 10px 15px;
            border: none;
            background-color: #111;
            font-size: 12px;
            line-height: 20px;
            font-weight: 700;
            color: #fff;
            vertical-align: middle;
            .panel-header-tools {
                float: right;
                height: 100%;
                line-height: 20px;
            }
        }
        /*面板内容体*/
        .panel-body {
            @include border-radius-bottom-both(4px);
            /*overflow: hidden;*/
            border: none;
        }

        margin-bottom: 20px;
    }
    /*vue过渡样式 未启用*/
    /*
    .myTransition-enter-active,.myTransition-leave-active {
        -webkit-transition: height .5s ease-in-out, padding-top .5s ease-in-out, padding-bottom .5s ease-in-out;
        -moz-transition: height .5s ease-in-out, padding-top .5s ease-in-out, padding-bottom .5s ease-in-out;
        -ms-transition: height .5s ease-in-out, padding-top .5s ease-in-out, padding-bottom .5s ease-in-out;
        -o-transition: height .5s ease-in-out, padding-top .5s ease-in-out, padding-bottom .5s ease-in-out;
        transition: height .5s ease-in-out, padding-top .5s ease-in-out, padding-bottom .5s ease-in-out;
    }
    .myTransition-enter {
        height: 0;
        padding-top: 0;
        padding-bottom: 0;
    }
    .myTransition-enter-to {
        height: 300px;
        padding-top: 20px;
        padding-bottom: 20px;
    }
    .myTransition-leave {
        height: 300px;
        padding-top: 20px;
        padding-bottom: 20px;
    }
    .myTransition-leave-to {
        height: 0;
        padding-top: 0;
        padding-bottom: 0;
    }
    */
    /*图标样式*/
    .tools-common {
        @include border-radius(8px);
        display: inline-block;
        height: 16px;
        width: 16px;
        text-align: center;
        line-height: 16px;
        vertical-align: middle;
        color: white;
        margin-left: 10px;
        &:hover {
            cursor: pointer;
            opacity: .8;
        }
        &:focus {
            outline: none;
        }
    }
    .refresh-icon {
        background-color: #4cd964;
    }
    .mix-icon {
        background-color: #f0ad4e;
    }
    .close-icon {
        background-color: #FF3B30;
    }
</style>
